<template>
  <div class="login-inside">
    <div class="title">您好！</div>
    <div class="subheading">欢迎登录汇劳动后台管理系统。</div>
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleFormRef"
      label-width="0"
      label-position="top"
    >
      <el-form-item label="" prop="username">
        <el-input v-model="form.username" placeholder="手机/邮箱/用户名"> </el-input>
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input v-model="form.password" show-password placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label="" style="margin-bottom: 80px">
        <div class="flex" style="width: 100%">
          <el-input v-model="form.verificationCode" placeholder="请输入验证码"></el-input
          ><img
            height="64"
            style="margin-left: 24px"
            src="@/assets/img/login/captcha.base64"
            alt=""
          />
        </div>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="logIn(ruleFormRef)">登录</el-button>
    <div class="otherInformation">
      <div class="left select-none" @click="setStatus(2)">立即注册</div>
      <div class="right select-none" @click="setStatus(3)">忘记密码？</div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useLoginStore } from "@/store/login/login";
const login = useLoginStore();
const { setStatus,setLogin} = login;
const ruleFormRef = ref();
const route = useRoute();
const router = useRouter();

const form = reactive({
  username: "123456",
  password: "123456",
  // username: "",
  // password: "",
});
const rules = reactive({
  username: [
    { required: true, trigger: "blur", message: "请输入用户名" },
    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入密码" },
    {
      min: 6,
      max: 18,
      message: "长度在 6 到 18 个字符",
      trigger: "blur",
    },
  ],
});
const logIn = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (form.username == "123456" && form.password == "123456") {
        setLogin()
        ElMessage.success("登录成功");
        const redirect = route.query.redirect;
        router.push(redirect || "/dashboard");
      }
    } else ElMessage.error("验证失败");
  });
};
</script>

<style lang="scss" scoped>
.login-inside {
  padding: 48px;
  box-sizing: border-box;
  .title {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 52px;
    color: rgba(29, 33, 41, 1);
  }
  .subheading {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 29px;
    color: rgba(201, 205, 212, 1);
    margin-bottom: 48px;
  }
  .el-form-item {
    margin-bottom: 24px;
    :deep(.el-input) {
      height: 64px;
      font-size: 18px;
      .el-input__wrapper {
        padding: 0 27px;
      }
    }
  }
  .el-button {
    width: 100%;
    height: 55px;
    margin-bottom: 35px;
  }
  .otherInformation {
    display: flex;
    justify-content: space-between;

    .left,
    .right {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 26.06px;
      color: rgba(0, 0, 0, 0.9);
      cursor: pointer;
    }

    .left {
      color: rgba(36, 104, 242, 1);
    }
  }
}
</style>
